<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="@{/}">
    <meta charset="utf-8">
    <title>账套数据库连接详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="static/layui/css/layui.css" media="all"/>
</head>
<body class="layui-fluid">
<div class="layui-row">
    <div class="layui-col-md3 layui-col-md-offset3">
        <form class="layui-form" action="">
            <div class="layui-form-item" style="margin-top: 20px;">
                <div class="layui-inline">
                    <label class="layui-form-label">IP地址</label>
                    <div class="layui-input-block">
                        <input type="text" id="ip" th:value="${connection.ip}" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item" style="margin-top: 20px;">
                <div class="layui-inline">
                    <label class="layui-form-label">数据库端口</label>
                    <div class="layui-input-block">
                        <input type="text" id="port" th:value="${connection.port}" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item" style="margin-top: 20px;">
                <div class="layui-inline">
                    <label class="layui-form-label">数据库名</label>
                    <div class="layui-input-block">
                        <input type="text" id="dataBase" th:value="${connection.dataBase}" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item" style="margin-top: 20px;">
                <div class="layui-inline">
                    <label class="layui-form-label">数据库账号</label>
                    <div class="layui-input-block">
                        <input type="text" id="user" th:value="${connection.user}" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item" style="margin-top: 20px;">
                <div class="layui-inline">
                    <label class="layui-form-label">数据库密码</label>
                    <div class="layui-input-block">
                        <input type="text" id="password" th:value="${connection.password}" class="layui-input">
                    </div>
                </div>
            </div>
            <a id="connect" class="layui-btn layui-btn-sm " style="margin-top: 5px;margin-left: 220px;"><i class="layui-icon">&#xe64c;</i>连接</a>
        </form>
    </div>
</div>
<script type="text/javascript" src="static/plugin/jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="static/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['form','layer','jquery','element'],function() {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.jquery,
            element = layui.element;

        $("#connect").click(function (){
            var ip = $("#ip").val();
            var port = $("#port").val();
            var dataBase = $("#dataBase").val();
            var user = $("#user").val();
            var password = $("#password").val();
            if(ip == ''){
                layer.msg("IP地址不能为空!");
                return;
            }
            if(port == ''){
                layer.msg("数据库端口不能为空!");
                return;
            }
            if(dataBase == ''){
                layer.msg("数据库名不能为空!");
                return;
            }
            if(user == ''){
                layer.msg("数据库用户不能为空!");
                return;
            }
            if(password == ''){
                layer.msg("数据库密码不能为空!");
                return;
            }
            var connectInfo = {
                ip:ip
                ,port:port
                ,dataBase:dataBase
                ,user:user
                ,password:password
            }
            $.ajax({
                url: "/manage/database_config/connection",
                type: "post",
                data: connectInfo,
                success: function (d) {
                    if(d.code == '200'){
                        top.layer.msg("连接成功，"+d.msg,{icon:1});
                    }else{
                        top.layer.msg("连接失败，"+d.msg,{icon:2});
                    }
                },
                error: function () {
                    alert("连接失败！");
                }
            })
        });
    })
</script>
</body>
</html>